<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="author" content="100200cs"/>
    <title>用户登录</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>

</head>
<body style="background-color: #f8f8f8">


<div class="weui-cells__title"></div>

<form id="form_1">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">账号</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="text" name="tel" id="tel" class="weui-input" placeholder="请输入账号"/></div>

        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="password" name="pwd" id="pwd" class="weui-input" placeholder="请输入密码"/></div>

        </div>
        <!--<div class="weui-cell weui-cell_vcode">-->
            <!--<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>-->
            <!--<div class="weui-cell__bd weui-cell_primary"><input id="vcode" name="vcode" type="number" class="weui-input"></div>-->
            <!--<div class="weui-cell__ft"><img id="verify_img" src="{:captcha_src()}" onclick="refreshVerify()"/></div>-->
        <!--</div>-->
    </div>
    <div class="weui-cells__tips"></div>
    <div class="weui-btn-area">
        <a href="javascript:submit();" class="weui-btn weui-btn_primary">登录</a>
    </div>

</form>
<div class="weui-btn-area">
    <a href="register?returnURL={$URL}" class="weui-btn weui-btn_plain-primary">注册</a>
</div>


<script>


    var tel_right=false;
    var pwd_right=false;
    var vali_right=false;
    function refreshVerify() {

        $('#verify_img').attr("src", "/captcha");
    }

</script>


<script type="text/javascript">
    if($.cookie('the_tel')&&$.cookie('the_pwd')){
        $("#tel").val($.cookie('the_tel'));
        $("#pwd").val($.cookie('the_pwd'));
    }

    //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
    $("#form_1 :input").each(function () {
        //创建元素
        var $required = $("<span class='weui-msg__desc' style='color:red;'>*</span>");
        //将它追加到文档中
        if($(this).is("#tel") || $(this).is("#pwd")){
            $(this).parent().parent().append($required);
        }
    });

    var vali_tel=function(thiz){

            var $parent = $(thiz).parent().parent();

            $parent.find(".weui-msg__desc").remove();
            tel_right=false;
            if(thiz.value.length <4){
                var errorMsg = " 不能少于4位！";
                $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
            }else if(thiz.value.length>16){
                var errorMsg = " 不能多于16位！";
                $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
            }
            else if( !/^[A-Za-z0-9]+$/.test(thiz.value)){
                var errorMsg = " 仅限字母和数字！";
                $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
            }
            else{
                var okMsg=" 格式正确";
                $parent.find(".weui-msg__desc").remove();
                $parent.append("<span class='weui-msg__desc' style='color:green;'>" + okMsg + "</span>");
                tel_right=true;
            }

    }
    var vali_pwd=function(thiz){

            var $parent = $(thiz).parent().parent();

            $parent.find(".weui-msg__desc").remove();
            pwd_right=false;
            if(thiz.value.length <6){
                var errorMsg = " 不能少于6位！";
                $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
            }else if(thiz.value.length>20){
                var errorMsg = " 不能多于20位！";
                $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
            }
            else if( !/^[A-Za-z0-9]+$/.test(thiz.value)){
                var errorMsg = " 仅限字母和数字！";
                $parent.append("<span class='weui-msg__desc' style='color:red;'>" + errorMsg + "</span>");
            }
            else{
                var okMsg=" 格式正确";
                $parent.find(".weui-msg__desc").remove();
                $parent.append("<span class='weui-msg__desc' style='color:green;'>" + okMsg + "</span>");
                pwd_right=true;
            }

    }
    $("form :input").blur(function(){
        //验证名称
        if($(this).is("#tel")) {
            vali_tel(this);
        }
        //验证邮箱
        if($(this).is("#pwd")) {
            vali_pwd(this);
        }
    });

    function submit() {
        vali_tel($("#tel").get(0));
        vali_pwd($("#pwd").get(0));

        if(tel_right && pwd_right) {
            $.ajax({
                    url: 'check',//url
                    data: {vcode: $("#vcode").val(),
                            tel:$("#tel").val(),
                            pwd:md5($("#pwd").val())},
                    type: 'POST',// 'POST' or 'GET'
                    dataType: 'json',//'json' or 'text' or 'html'
                    timeout: 2000,//超时时间

                    error:function(){
                        $.toast("网络不通<br>稍后重试", "cancel");
                    },

                    success: function (data) {
                        if (data['vcode']) {
                            refreshVerify();
                            if(data['tel']){
                                if ( data['pwd']){
                                    $.toast("登陆成功<br>即将返回", function() {
                                        console.log("ok");
                                        $.cookie('the_tel',$("#tel").val() , { expires: 7 });
                                        $.cookie('the_pwd',$("#pwd").val() , { expires: 7 });
                                        window.location.href="{$URL}";
                                    });
                                }else{
                                    $.toast("密码错误！", "forbidden");
                                }
                            }else{
                                $.toast("账号不存在！", "forbidden");
                            }
                        }else{
                            $.toast("验证码错误！", "forbidden");
                            refreshVerify();
                        }
                    }
                }
            )
        }
        else{
            $.toast("账号或密码<br>" +
                "格式错误！", "forbidden");
        }
    }

</script>
</body>
</html>